<template>
  <div>
    <div :class="{ 'user-layout': item.role !== 'ai' }" class="footer-wrapper">
      <div
        :class="{ rolePosition: item.role !== 'ai' }"
        class="footer-container"
      >
        <!-- 复制按钮 -->
        <CopyBtn :content="item.content" />
        <!-- 翻译按钮 -->
        <TranslateBtn
          :id="item.id"
          v-model:is-loading="isLoading"
          v-model:translate-content="translateContent"
          v-model:translate-status="translateStatus"
          :content="item.content"
          :placement="item.placement"
          class="ml-2"
        />
      </div>
      <!-- 底部时间渲染 -->
      <div class="footer-time">
        {{ dayjs(item.time).format('MM/DD HH:mm') }}
      </div>
      <!-- 优化后的消息状态图标 -->
      <MessageStatus :placement="item.placement" :status="item.status" />
    </div>
    <!-- 翻译消息体 -->
    <div v-if="translateContent" class="mt-2">
      <TranslateContent
        :id="item.id"
        v-model:is-loading="isLoading"
        v-model:translate-status="translateStatus"
        :content="item.content"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { listType } from '#/store/agentchat';

import type { PropType } from 'vue';

import dayjs from 'dayjs';

import {
  CopyBtn,
  MessageStatus,
  TranslateBtn,
  TranslateContent,
} from './messagefooter';

defineProps({
  // 消息体
  item: {
    type: Object as PropType<listType>,
    default: () => {},
  },
});

const isLoading = ref(false); // 翻译加载状态
const translateStatus = ref('noStatus'); // 翻译图标状态
const translateContent = ref(''); // 翻译内容
</script>

<style scoped lang="scss">
// 底部布局
.footer-wrapper {
  display: flex;
  gap: 10px;
  align-items: center;
}

// 用户消息布局：时间在左，按钮在右
.user-layout {
  flex-direction: row-reverse;
}

// 时间布局
.footer-time {
  margin-top: 3px;
  font-size: 12px;
  color: rgb(58 58 58);
}

// 按钮布局
.footer-container {
  display: flex;

  // 重置 Element Plus 按钮的默认边距
  :deep(.el-button) {
    margin-right: 0;
    margin-left: 0;
  }

  // 为正常顺序的按钮设置右边距
  :deep(.el-button + .el-button) {
    margin-left: 8px;
  }
}

// 翻译按钮样式
.translate-button {
  :deep(.el-icon) {
    width: 50px !important;

    svg {
      height: 16px !important;
    }
  }
}
// 角色位置
.rolePosition {
  flex-direction: row-reverse !important;

  // 为反转布局重新设置按钮间距
  :deep(.el-button + .el-button) {
    margin-right: 8px;
    margin-left: 0;
  }
}
//取消左侧消息边框样式
:deep(.el-bubble-content-wrapper .el-bubble-content-borderless) {
  border: none !important;
}
</style>
